<template>
  <div>
        <draggable
            class="syllable_ul"
            element="ul"
            :list="syllable"
            :options="{group:'title', animation:150}"
            :no-transition-on-drag="true"
            @change="change"
            @start="start"
            @end="end"
            :move="move"
          >
            <transition-group type="transition"  :name="!drag? 'syll_li' : null" :css="true">
              <li v-for="(item , idx) in syllable" :key="idx">{{item.title}}</li>
            </transition-group>
          </draggable>
  </div>
</template>
 
<script>
import draggable from "vuedraggable";
export default {
  components: {
    draggable,
  },
  data() {
    return {
        drag: false,
        syllable: [
            {
                title: '第 1 组'
            },
            {
                title: '第 2 组'
            },
            {
                title: '第 3 组'
            },
        ]
    };
  },
  methods: {
    // evt 里面有两个值，一个 evt.added 和 evt.removed
// 可以分别知道移动元素的 ID 和 删除元素的 ID
    change(evt) {
      console.log(evt , 'change...')
    },
    // start , end , add , update , sort , remove 得到的都差不多
    start(evt) {
      this.drag = true
      console.log(evt , 'start...')
    },
    end(evt) {
      console.log(evt , 'end....')
      this.drag = true
      evt.item  // 可以知道拖动的本身
      evt.to    // 可以知道拖动的目标列表
      evt.from  // 可以知道之前的列表
      evt.oldIndex  // 可以知道拖动前的位置
      evt.newIndex  // 可以知道拖动后的位置
    },
    move(evt, originalEvent) {
      console.log(evt , 'move')
      console.log(originalEvent) // 鼠标位置
    }
  },
};
</script>

<style>
.item {
  border: 1px solid #bbb;
  margin: 10px;
  width: 100px;
  padding: 5px;
}
</style>
